"use client";
import React, { useState } from "react";
import { Segmented, ConfigProvider, Spin, message } from "antd";
import { LoadingOutlined } from "@ant-design/icons";
import "./index.scss";
import ManageTable from "./ManageTable/page";
import ManagePeople from "./ManagePeople/page";
import ManageVideo from "./ManageVideo/page";
import VideoStore from "@/app/store/video";
import ManageLog from "./ManageLog/page";

const Manage: React.FC = () => {
  const [web, setweb] = useState<string>("大屏数字人web");
  const [loading, setLoading] = useState<boolean>(false);
  const { setpeoplestart } = VideoStore();

  return (
    <div className="manage">
      {loading && (
        <div className="loading">
          <LoadingOutlined style={{ color: "#4096ff" }} />
          <div className="loading_text">加载中请稍后...</div>
        </div>
      )}
      <div className="manage_title">数字人后台管理</div>

      <div className="tag">
        <ConfigProvider
          theme={{
            components: {
              Segmented: {
                itemSelectedBg: "#3b8dff",
                itemSelectedColor: "#ffff",
                trackPadding: "5px",
              },
            },
          }}
        >
          <Segmented
            options={["大屏数字人web", "数字人视频讲解", "数字人日志"]}
            style={{ background: "#fff" }}
            onChange={(value) => {
              setweb(value);
              setpeoplestart(true);
            }}
            defaultValue="大屏数字人web"
          />
        </ConfigProvider>
      </div>

      {web === "大屏数字人web" && <ManageTable />}
      {web === "数字人视频讲解" && <ManageVideo />}
      {web === "数字人日志" && <ManageLog />}

      {web !== "数字人日志" && (
        <ManagePeople
          setDate={(value) => {
            setLoading(true);
            const timer = setTimeout(() => {
              setLoading(false);
              message.success("执行成功，请刷新前台页面");
            }, value * 1000);
            return () => clearTimeout(timer);
          }}
          setLoading={(value) => {
            setLoading(value);
            console.log(value, "value");
          }}
        />
      )}
    </div>
  );
};

export default Manage;
